<template>
    <h2 style="text-align: center;">注册页面</h2>
    <table class="table">
        <tbody>
            <tr class="form-inline">
                <td>用户名</td>
                <td>
                    <input type="text" v-model="form.name"  class="form-inline">
                </td>
            </tr>
            <tr class="form-inline">
                <td>密码</td>
                <td>
                    <input type="password" v-model="form.password"  class="form-inline">
                </td>
            </tr>
            <tr class="form-inline">
                <td>用户类别</td>
                <td>
                    <input type="text" v-model="form.type"  class="form-inline">
                </td>
            </tr>
            <tr class="form-inline">
                <td colspan="2" style="text-align: center;">
                    <button class="btn btn-primary" @click="zhuce">注册</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css"
import router from '@/router';
import { useRoute } from 'vue-router';

const form = reactive({
  "name": "",
  "password": "",
  "type": ""
})

const zhuce = () => {
    if (!form.name) {
        alert("用户名不能为空");
        return;
    }
     if (!form.password) {
        alert("密码不能为空");
        return;
    }
     if (!form.type) {
        alert("类别不能为空");
        return;
    }
    axios.post("https://localhost:7230/api/User/Login", form).then(res => {
        if (res.data == -1) {
            alert("用户名不唯一");
            return;
        }
        else {
            alert("注册成功");
            router.push("/denglulist")
        }
    })
}


</script>